<template>
 	<div class="layui-layout layui-layout-admin">


      <!-- 主体内容 -->
      <div class="layui-body kedou-admin" id="LAY_app_body">
        <div id="title">
          <i><router-link to="/index">返回首页</router-link></i>
          <b @click='qp($event,1)'>{{fullscreen?'退出全屏':'全屏显示'}}</b>
        	<span>大屏数据统计</span>
        </div>
        <div id="map" style="-webkit-tap-highlight-color: transparent; user-select: none; min-height: 1080px; min-width: 1920px; background: transparent;"></div>
        <div id="order-top">
        	<div id="order-top-main">
            <dl v-for="(item,index) in info.regionCityReportList" v-if='index<5'>
              <dt>TOP{{index+1}}&nbsp;&nbsp;{{item.name}}/{{item.num}}单&nbsp;&nbsp;{{item.percentage}}%</dt>
              <dd>
                <span :style="'width:'+item.percentage+'%'"></span>
              </dd>
            </dl>
            
          </div>
        	<p class="title" style="width: 210px;line-height: 45px;">订单城市TOP5</p>
        </div>
        <div id="agent-spread">
        	<div id="agent-spread-main"></div>
        	<p class="title">订单时间段比例</p>
        </div>
        <div id="agent-team">
        	<div id="agent-team-main">
            <ul>
              <li><span>{{info.sumReportParam.dearlerCount}}</span><p>商家</p></li>
              <li><span>{{info.sumReportParam.shopUserCount}}</span><p>快递员</p></li>
              <li><span>{{info.sumReportParam.userCount}}</span><p>顾客</p></li>
              <li><span>{{info.orderCount.totalCount}}</span><p>订单数</p></li>
            </ul>
          </div>
          <p style="width: 208px">数据统计</p>
        </div>
        <div id="statistics">
        	<span class="today">今日支付金额：</span>
        	<span class="time"></span>
        	<div class="number" style="width: 100%">
        		<div>0</div>
        		<div>0</div>
        		<div>0</div>
        		<div>0</div>
        		<div>0</div>
        		<div>0</div>
        		<div>0</div>
        		<div>0</div>
        		<div>0</div>
        		<div>0</div>
        	</div>
        	<span class="total">累计支付金额：{{info.orderCount.totalAmount}}</span>
        	<span class="yestoday">昨日支付金额：{{info.orderCount.yesterdayAmount}}</span>
        </div>
        <div style="" id="timely">
        	<p>实时订单信息</p>
        	<div style="overflow: hidden;height: 210px;margin-top: 60px;position: relative;">
        		<div class="timelyContent">
        			<ul>
		                <li style="height: 36px; margin: 0;" v-for='(item,index) in info.capacityOrders' v-if="index<16">
		                	<p style="color: white;">{{dotime(item.startAt)}} {{item.contactName}}（{{item.contactPhone}}）下单，金额{{item.totalAmount}}元</p>
		                </li>
        			</ul>
        		</div>
        	</div>


        </div>
        <div id="totalAmount">
        	<div class="amountContent">
            	<p v-for="(item,index) in info.dealerCapacityReportList" v-if='index<20' style="color: white; margin-left: 20px; font-size: 12px; font-weight: lighter; margin-top: 11px">
            		<span style="color:#ffce37">NO{{index+1}}</span>&nbsp;&nbsp;{{item.amount}}元
            		<span style="float: right; margin-right: 35px">{{item.userName?item.userName:item.mobile}}</span>
            	</p>
            
        	</div>
        	<p style="width: 210px">商家业绩排行榜</p>
        </div>
      </div>
</div>
</template>

<script>
	import echarts from 'echarts'
  import '../../node_modules/echarts/map/js/china.js'
	export default {
	  name: 'index',
	  data () {
	    return {
	      info:{sumReportParam:{},dealerCapacityReportList:[],regionCityReportList:[],mapList:[],orderCount:{},orderPeriodParams:[],capacityOrders:[]},
          fullscreen: false,
          isget:'',
          order:[]
	    }
	  },
	  mounted(){
      	this.resize();
      	this.getdate();
      	var _this=this;
        var interval =setInterval(function(){
      		_this.getdate();
      	},20000)
        this.isget=interval;
	  },
	  destroyed() {
	  	clearInterval(this.isget);
	  },
	  methods: {
	  	getdate:function(){
	  		var _this=this;
	  		var url="/huanxinsong/report/getMergeReportAllJson"
	    	ajaxRequest(url,'GET','json','',function(ret,err){
	    		//alert(JSON.stringify(ret))
				_this.info=ret.content;
				var num=parseInt(ret.content.orderCount.todayAmount);
				var monery=num.toString();
				for(var i=0;i<monery.length;i++){
					$(".number div").eq(10-monery.length+i).text(monery[i]);
				}
				var i=0;
				setInterval(function(){
					var index=i*36;
					if(i<ret.content.capacityOrders.length-5){
						var c=ret.content.capacityOrders.length-5-i;
						i++;
						var da=ret.content.capacityOrders[c];
						if(da.longitude!='0.000000'&&da.longitude!=undefined){
							var arr=[];
							var obj={};
							obj.name='';
							var lon=da.longitude;
							var lat=da.latitude;
							obj.value=[lon,lat]
							arr[0]=obj;
							_this.order=arr;
							_this.map();
						}
						if(index==0){
							$(".timelyContent").css("marginBottom",'-'+index+"PX");
						}
						else{
							$(".timelyContent").animate({marginBottom:'-'+index+"PX"},'slow');	
						}
					}
				},3000)
				_this.timebl();
				_this.map();
			},1)
	  	},
	  	
	  	dotime:function(val,type){
	  		return FormatDate(val,type)
	  	},
	      qp:function(e,val){
	       let element = document.documentElement;
	       if (this.fullscreen) {
	           if (document.exitFullscreen) {
	               document.exitFullscreen();
	           } else if (document.webkitCancelFullScreen) {
	               document.webkitCancelFullScreen();
	           } else if (document.mozCancelFullScreen) {
	               document.mozCancelFullScreen();
	           } else if (document.msExitFullscreen) {
	               document.msExitFullscreen();
	           }
	       } else {
	           if (element.requestFullscreen) {
	               element.requestFullscreen();
	           } else if (element.webkitRequestFullScreen) {
	               element.webkitRequestFullScreen();
	           } else if (element.mozRequestFullScreen) {
	               element.mozRequestFullScreen();
	           } else if (element.msRequestFullscreen) {
	               // IE11
	               element.msRequestFullscreen();
	           }
	       }
	       this.fullscreen = !this.fullscreen;

      },
      timebl:function(){
      
      	var dates=this.info.orderPeriodParams;
      	var arr=[];
      	for(var i=0;i<dates.length;i++){
      		var obj={};
      		obj.value=dates[i].count;
      		obj.name=dates[i].periodAtStr;
      		if(i==0){
      			obj.itemStyle={color:'#9ac200'}
      		}
      		else if(i==1){
      			obj.itemStyle={color:'#c00'}
      		}
      		else{
      			obj.itemStyle={color:'#ffac38'}
      		}
      		arr.push(obj)
      	}
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data:arr,
                    label: {
                         normal: {
                              textStyle: {
                                    color: '#fff'
                              }
                         }
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart = echarts.init(document.getElementById('agent-spread-main'));
        myChart.setOption(option)
      },
      getmapdates:function(){
        var series = [];
        var _this=this;
        series.push({
          name: '线',
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 2,
            trailLength: 0.05,
            color: 'rgba(177,253,253,.8)',
            symbol:'rect',
            symbolSize: [2, 50]
          },
          lineStyle: {
            normal: {
              color: '#a6c84c',
              width: 0,
              type:'solid',
              curveness: 0
            }
          },
          data: []
        },
        {
          name:'闪点',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          data:_this.info.mapList,
          rippleEffect: {
            period:2,
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: false,
              position: 'right',
              formatter: '{b}'
            },
            emphasis:{
              show:false
            }
          },
          symbolSize: function (val) {
          	var v=val[2];
          	var str=v.toString().length;
          	if(str==6){
          		v=v/30000
          	}
          	if(str==5){
          		v=v/3000
          	}
          	if(str==4){
          		v=v/1000
          	}
          	if(str==3){
          		v=v/100
          	}
          	if(str==2){
          		v=v/10
          	}
          	if(str==1){
          		v=v/10-3
          	}
          	
            return Math.floor(v);
          },
          itemStyle: {
            normal: {
              color: 'red'
            }
          },
          tooltip:{
            show:false
          }
        },
        {
          name:'总部',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
             data:_this.order,
            rippleEffect: {
              period:2,
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: false,
                position: 'right',
                formatter: '{b}'
              },
              emphasis:{
                formatter: function(val){
                  return val;
                }
              }

            },
            symbolSize: function () {
              return 20;
            },
            itemStyle: {
              normal: {
                color: '#ffffff'
              }
            },
            tooltip:{
              formatter:function(val){
                return val.data.name
              }
            }

          }
        );
        return series;
      },
      map:function(){
        var _this=this;
        var option = {
          tooltip : {
              trigger: 'item'
          },
          geo: {
              map: 'china',
              label: {
                 normal: {
                    show: false,
                    textStyle: {
                      color: '#67c0e7'
                    }
                  },
                  emphasis:{
                    show: true,
                    textStyle: {
                      color: '#67c0e7'
                    }
                  }
              },
              roam: false,
              zoom:0.6,
              left:330,
              top:160,
              itemStyle: {
                normal:{
                  borderColor: '#67c0e7',
                  areaColor:'rgba(0,0,0,0)'
                },
                emphasis:{
                  borderColor: '#67c0e7',
                  areaColor:'rgba(0,0,0,0)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 0,
                  borderWidth: 1,
                  shadowColor: 'rgba(0, 0, 0 ,1)'
                }
            }
          },
          series :_this.getmapdates()
          };
          var map = echarts.init(document.getElementById('map'));
          map.setOption(option);

      },
      //自适应屏幕
      resize:function(){
          var width=window.innerWidth;
          var scale=width/1920;
          $(".kedou-admin").css("transform",'scale('+scale+')');
          window.onresize=function(){
              var width=window.innerWidth;
              var scale=width/1920;
              $(".kedou-admin").css("transform",'scale('+scale+')');
          }
      }

	  },
	  updated:function(){
  		this.isShow = true;
  		layui.use('form', function(){
		  var form = layui.form;
		  form.render();

		});
 	  },
	}

</script>
<style>#app{height:100%;}</style>
<style scoped>
	.layui-layout-admin{height:100%;background-color:#022b59;}
	.kedou-admin{position: absolute;left:0;top:0;width:1920px;transform-origin: left top 0px;height:1080px;background:url(./../assets/bg.png) left top no-repeat;background-size:cover;overflow:hidden;}
	#title i{color:#fff;font-style:normal;font-size:20px;position: absolute;left:2%;top:0;line-height:80px; z-index: 1000;}
  #title b{color:#013b79;background-color:#fff;z-index:1000;cursor:pointer;height:40px;line-height:40px;padding:0 20px;border-radius:5px;display:block;font-size:20px;position: absolute;right:2%;top:20px;font-weight:normal;}
  #title a,#title a:visited{color:#fff;}
  #order-top-main{padding:20px 0;}
  #order-top-main dl{color:#fff;padding:10px 5%;margin-top:0;}
  #order-top-main dl dd{height:12px;width:100%;border:1px solid #ff8937;margin-top:5px;position:relative;}
  #order-top-main dl dd span{display:block;background-color:#ff8937;height:12px;}
  #order-top-main dl dd i{font-style:normal;}
  #agent-team-main{padding:60px 0 0 15px;}
  #agent-team-main ul li{display:inline-block;padding:30px 0;width:240px;text-align:center; background-color:#013b79;color:#fff;margin:0 0 15px 10px;}
  #agent-team-main ul li span{font-size:26px;font-weight:bold;}
  #agent-team-main ul li p{font-size:16px;}
  #join {
		height: 270px;
		width: 410px;
		float: left;
		margin-top: 25px
	}
	#take, #sales-trend {
		height: 270px;
		width: 430px;
		float: left;
		margin-top: 25px
	}
	.timelyContent {
		position: absolute;
		bottom: 0;
		margin-left: 45px;
		overflow: hidden
	}
	.timelyContent li {
		width: 100%;
		height: 35px;
		line-height: 35px;
		list-style: none;
		font-size: 12px;
	}
	.today {
		color: #76ddea;
	}
	.time {
		position: absolute;
		color: #76ddea;
		right: 0;
	}
	.number {
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
	}
	.number div {
		width: 60px;
		height: 80px;
		line-height: 80px;
		border: 2px #00aae8 solid;
		border-radius: 5px;
		text-align: center;
		color: #fff;
		font-size: 50px;
		font-weight: 300;
	}
	.total {
		position: absolute;
		color: #76ddea;
	}
	.yestoday {
		position: absolute;
		color: #76ddea;
		right: 0;
	}
	#order-top {
		position: absolute;
		top: 214px;
		right: 315px;
		width: 272px;
		height: 320px;
		background: url('./../assets/bg-tr.png') center center / auto 100%  no-repeat;

	}
	#order-top p, #totalAmount > p, #agent-team >p {
        color:#00fff7;
		position: absolute;
        line-height: 45px;
		top: -20px;
        left: 50%;
        transform: translateX(-50%);
        background:url('./../assets/title-bg.png') no-repeat;
        background-size:  100% 100%;
		text-align: center;
		font-size: 20px;
	}
	 #order-top div,#agent-spread div, #agent-team div {
		width: 100%;
		height: 100%
	}
	#map {
		position:absolute;
		top:0px;
		left:0px
	}
	#agent-spread {
		position: absolute;
		top:170px;
		left: 15px;
		width: 558px;
		height: 339px;
		background: url('./../assets/bg-tl.png') center center / auto 100%  no-repeat;
	}

	#agent-spread p {
		width: 170px;
        color:#00fff7;
        line-height: 45px;
        transform: translateX(-50%);
        background:url('./../assets/title-bg.png') no-repeat 100% 100%;
        background-size: cover;
        text-align: center;
        font-size: 20px;
        position: absolute;
        top: 5px;
        left: 150px;
        font-size: 20px;
	}
	#agent-team {
		position: absolute;
		top:550px;
		left: 15px;
		width: 558px;
		height: 300px;
	}
	#title {
		width: 100%;
		height: 80px;
		position: absolute;
		top: 0;
		background: url('./../assets/bg-title.png') no-repeat;
		text-align: center;
		line-height: 80px;
	}
    #title img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }
	#title span {
		display: inline-block;
		vertical-align: top;
		color: white;
		font-size: 36px;
		margin-left: 60px;
	}
	#timely {
		width: 466px;
		height: 305px;
		position: absolute;
		right: 295px;
		top: 560px;
		background: url(./../assets/timely-content.png) no-repeat;
        background-size: 100% 100%;
	}
	#timely > p, #monthTop5 > p {
        width: 170px;
        color:#00fff7;
        line-height: 45px;
        background:url('./../assets/title-bg.png') no-repeat 100% 100%;
        background-size: cover;
        text-align: center;
        font-size: 20px;
		position: absolute;
		left: 50px;
		font-size: 20px;

	}
	#statistics {
		width: 703px;
		height: 190px;
		position: absolute;
		margin: 20px auto;
		left: -64px;
		right: 0;
		top: 165px;
	}
	#totalAmount {
		width: 15%;
		height: 68%;
		position: absolute;
		right: 10px;
		top:213px;
		background: url(./../assets/bg-totalamount.png) no-repeat;
	}
	.amountContent {
		margin-top: 36px;
        overflow: hidden;
        height: 580px;
	}
	#monthTop5 {
		width: 30%;
		height: 30%;
		position: absolute;
		bottom: -25px;
		left: 5px;
		background: url(./../assets/bg-monthtop5.png) no-repeat;
	}
	.top5Content {
		margin-top: 70px;
	}
    #bottom-modal p{
        position: absolute;
        color:#00fff7;
        z-index: 10000;
        line-height: 45px;
        background:url('./../assets/title-bg.png') no-repeat 100% 100%;
        background-size: cover;
        text-align: center;
        font-size: 20px;
        top:8px;
        width: 170px;
        left: 50%;
        transform: translateX(-50%);
    }
    #bottom-modal div{
        overflow: hidden;
        display: inline-block;
    }
</style>
